import React, { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Layout, theme } from 'antd';
import GroupSRC from '@images/Group.svg';
import HeaderS from '../components/header'
import styles from '@style/index.module.css'
import SideView from '../components/side'
const { Header, Content, Sider } = Layout;
const App = () => {
  const { token: { colorBgContainer } } = theme.useToken();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider className={styles.box} style={{ background: colorBgContainer }} collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} >
        <SideView />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <HeaderS />
        </Header>
        <Content
          style={{
            padding: 20,
            height: '100%',
            width: '100%',
            background: ' linear-gradient(to bottom, #f7f8fb, #f9f6ff)',
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout >
  );
};
export default App;


